<template>
    <el-container>
        <el-header>
            <el-container>
                <el-date-picker v-model="data.orderTimeList" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="预约开始日期" end-placeholder="预约结束日期" @change="(value) => handleChange(value || [], 'orderTimeList')" />
                <SearchInput placeholder="昵称、手机、客户名称" :change="(value) => handleChange(value, 'nicknameOrPhone')" />
                <SearchButton :click="search" />
            </el-container>
        </el-header>
        <el-main>
            <el-table :data="tableData" stripe element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="loading">
                <el-table-column prop="orderId" label="订单编号" width="80" />
                <el-table-column prop="userId" label="用户编号" width="80" />
                <el-table-column prop="nick" label="昵称" width="80" />
                <el-table-column prop="username" label="客户名称" width="80" />
                <el-table-column prop="head" label="客户头像" width="120">
                    <template #="{ head }">
                        <Avatar :src="head" />
                    </template>
                </el-table-column>
                <el-table-column v-if="isShowPhone" prop="phone" label="手机号码" width="120" />
                <el-table-column prop="zsName" label="预约诊所" width="120" />
                <el-table-column prop="ysName" label="预约医生" width="80" />
                <el-table-column prop="orderTime" label="预约时间" width="110" />
                <el-table-column prop="orderAddr" label="预约的位置" min-width="80" />
                <el-table-column prop="inlet" label="预约入口" width="100" />
                <el-table-column prop="createTime" label="创建时间" width="110" />
                <el-table-column prop="status" label="状态" width="80">
                    <template #="{ status }">
                        <el-tag v-if="status == '1'">已预约</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="referrerNick" label="来源" width="80" />
                <el-table-column label="操作" width="120">
                    <template #="{ orderMu }">
                        <el-button plain @click="showMakeDeal(orderMu)">
                            设置成交
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <SearchPagination :currentPage="currentPage" :total="total" :limit="limit" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
        </el-main>
        <el-footer>
            <el-dialog width="25%" title="设置成交" :visible="showUpdateForm">
                <el-form ref="updateForm" :model="updateForm" label-width="140px">
                    <el-form-item label="缴费状态">
                        <el-radio-group v-model="updateForm.payState">
                            <el-radio :label="1">已缴费</el-radio>
                            <el-radio :label="0">未缴费</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="奖金">
                        <el-input type="number" v-model="updateForm.dealBonus" placeholder="请输入奖金" />
                    </el-form-item>
                    <el-form-item label="奖金发放时间">
                        <el-date-picker v-model="updateForm.giveTime" type="date" placeholder="请输入奖金发放时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="showUpdateForm = false">取消 </el-button>
                        <el-button type="primary" @click="makeDeal">确定 </el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-footer>
    </el-container>
</template>

<script>
import { page } from '@/chaos/functions/mixin/crud';
import Data from '@/chaos/functions/common/Data';

export default {
    name: 'adminorder',
    mixins: [page],
    data() {
        return {
            domain: 'iya_order',
            isShowPhone: true,
            showUpdateForm: false,
            updateForm: {
                payState: 0
            }
        };
    },
    created() {
        this.isShowPhone =
            this.$store.getters.user.roleName == 'ADMIN' ||
            this.$store.getters.user.roleName == 'DEV';
        this.searchMethod = 'adminOrders';
        this.search();
    },
    methods: {
        async showMakeDeal(orderMu) {
            this.showUpdateForm = true;
            const { payState, dealBonus, giveTime } = await Data.one(
                this.domain,
                orderMu
            );
            this.updateForm = {
                orderMu,
                payState,
                dealBonus: dealBonus / 100,
                giveTime
            };
        },
        async makeDeal() {
            const { orderMu, dealBonus, payState, giveTime } = this.updateForm;
            await Data.submit(this.domain + '/updateDeal', {
                mu: orderMu,
                data: {
                    dealState: 1,
                    dealBonus: dealBonus * 100,
                    payState,
                    giveTime
                }
            });
            this.showUpdateForm = false;
        }
    }
};
</script>
<style scoped></style>
